<template>
  <div>
    <div>
      <img src="@/assets/carousel/banner.jpg" class="carousel-img" />
    </div>

    <div class="app-item-contain">
      <el-card class="index-paper-show" shadow="never">
        <span class="index-title-h3" style="background-color: #f94500"
          >通知公告</span
        >
        <div
          class="announcement-index-card-contain"
          v-loading="announcementListLoading"
        >
          <none-show
            customer-style="no-data-layout-index"
            v-if="announcementNoneShow"
          />
          <div v-for="(item, index) in announcementTableData" :key="index">
            <div class="announcement-index-contain">
              <img :src="item.imageSrc" class="announcement-image" />
              <div class="announcement-title-contain">
                <div class="announcement-title">
                  <router-link
                    :to="{
                      path: '/announcement/detail',
                      query: { id: item.id }
                    }"
                    class="announcement-link"
                  >
                    <el-tag
                      effect="dark"
                      type=""
                      class="announcement-tag"
                      v-if="item.overhead"
                      >顶置
                    </el-tag>
                    <el-tag
                      effect="dark"
                      type="danger"
                      class="announcement-tag"
                      v-if="item.importanted"
                    >
                      重要
                    </el-tag>
                    {{ item.title }}
                  </router-link>
                </div>
                <div class="announcement-time">
                  发布时间：{{ item.createTime }}
                </div>
              </div>
            </div>
            <div
              class="line"
              v-if="index !== announcementTableData.length - 1"
            ></div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { page as announcementPage } from '@/api/announcement';

export default {
  data() {
    return {
      announcementListLoading: true,
      announcementTableData: [],
      announcementNoneShow: false
    };
  },
  created() {
    this.announcementLoad();
  },
  methods: {
    announcementLoad() {
      this.announcementListLoading = true;
      announcementPage({ pageIndex: 1, pageSize: 5 })
        .then(data => {
          const re = data.response;
          this.announcementTableData = re.list;
          this.announcementNoneShow = re.total === 0;
        })
        .finally(() => {
          this.announcementListLoading = false;
        });
    }
  }
};
</script>
